import{d as t,M as l,A as a,h as d}from"./Anchors-CRD96j4l.js";import{D as o,a as i}from"./Demo-Ck8WGKWN.js";import{d as c}from"./index-BpvWz174.js";import{d as s}from"./dayjs.min-CZL7dKUh.js";const m={path:"/form/form",name:"form",title:"Form 表单"};function r(n){const e={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...n.components};return l(d,{children:[l("div",{class:"sys-ctx-main-left",children:[l(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),m.title]}),l(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(o,{}),t(i,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Form, FormItem, Input, useForm } from "cui-solid"

export default () => {
    interface FormData {
        u: string
        p: string
    }

    const form = useForm<FormData>({
        data: {
            u: '',
            p: ''
        },
        validation: {
        },
        message: {
        }
    });

    return <Form form={form} inline>
        <FormItem name="u" label="用户名：">
            <Input type="text"/>
        </FormItem>
        <FormItem name="p" label="密码：">
            <Input type="password"/>
        </FormItem>
    </Form>
}`,scopes:void 0,children:l(e.p,{children:["设置属性 ",t(e.code,{className:"sp-inline-code",children:"inline"})," ，表单元素可以水平排列。"]})}),t(i,{id:"dynamic_rule",title:"动态校验",src:"2dynamic_rule.demo.tsx",code:`import { Form, FormItem, Input, RadioGroup, useForm } from "cui-solid"

export default () => {
    interface FormData {
        select: number
        value: string
    }

    const form = useForm<FormData>({
        data: {
            select: 1,
            value: ''
        },
        validation: {
        },
        message: {
            value: {
                required: '请填写信息',
                email: '请填写正确的邮箱地址',
                mobile: '请填写正确的手机号码'
            }
        }
    });

    return <Form form={form}>
        <FormItem name="select" label="选项：">
            <RadioGroup data={[{label: '手机号验证', value: 1}, {label: '邮箱验证', value: 2}]}/>
        </FormItem>
        <FormItem name="value" label="校验值：" rules={form.select === 1 ? {required: true, mobile: true} : {required: true, email: true}}>
            <Input type="text"/>
        </FormItem>
    </Form>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"FormItem"})," 组件支持动态设置 ",t(e.code,{className:"sp-inline-code",children:"rules"})," ,可根据不同条件对数据进行校验, 默认使用内置校验方式，支持自定义校验规则。"]})}),t(i,{id:"error_transfer",title:"错误提示位置",src:"3error_transfer.demo.tsx",code:`import { Button, Form, FormItem, Input, Modal, useForm } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const [addModal, setAddModal] = createSignal(false);

    interface FormData {
        value: string
    }

    const form = useForm<FormData>({
        data: {
            value: ''
        },
        validation: {
        },
        message: {
            value: {
                required: '请填写信息',
                email: '请填写正确的邮箱地址',
                mobile: '请填写正确的手机号码'
            }
        }
    });

    return <>
        <Modal title="新增" visible={[addModal, setAddModal]}>
            <Form form={form} errorTransfer errorAlign="right">
                <FormItem name="value" label="校验值：" rules={{required: true, mobile: true}}>
                    <Input type="text"/>
                </FormItem>
            </Form>
        </Modal>
        <Button type="primary" onClick={() => {
            setAddModal(true);
        }}>打开</Button>
    </>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"Form"})," 和 ",t(e.code,{className:"sp-inline-code",children:"FormItem"})," 组件支持指定位置显示错误信息, 设置 ",t(e.code,{className:"sp-inline-code",children:"errorTransfer"})," ，将使用 ",t(e.code,{className:"sp-inline-code",children:"popover"}),` 显示错误信息\r
`,t(e.code,{className:"sp-inline-code",children:"errorAlign"}),"可以设置错误提示的位置，默认是",t(e.code,{className:"sp-inline-code",children:"right"})]})}),t(i,{id:"async_validate",title:"async-validator",src:"4async_validate.demo.tsx",code:`import { Button, CheckboxGroup, Form, FormItem, Input, message, Option, RadioGroup, Select, useForm } from "cui-solid"

export default () => {
    interface FormData {
        name: string
        mail: string
        city: string
        gender: string
        interest: string[]
        desc: string
    }

    const form = useForm<FormData>({
        data: {
            name: '',
            mail: '',
            city: '',
            gender: '',
            interest: [],
            desc: ''
        },
        validation: {
            name: [
                { required: true, message: 'The name cannot be empty', trigger: 'blur' }
            ],
            mail: [
                { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
            ],
            city: [
                { required: true, message: 'Please select the city', trigger: 'change' }
            ],
            gender: [
                { required: true, message: 'Please select gender', trigger: 'change' }
            ],
            interest: [
                { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
                { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
            ],
            desc: [
                { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
                { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
            ]
        }
    });

    return <Form form={form} labelWidth={80}>
        <FormItem name="name" label="Name">
            <Input type="text" placeholder="Enter your name"/>
        </FormItem>
        <FormItem name="mail" label="E-mail">
            <Input type="text" placeholder="Enter your e-mail"/>
        </FormItem>
        <FormItem name="city" label="City">
            <Select placeholder="Select your city">
                <Option label="Beijing" value="beijing" />
                <Option label="Shanghai" value="shanghai" />
                <Option label="Shenzhen" value="shenzhen" />
            </Select>
        </FormItem>
        <FormItem label="Gender" name="gender">
            <RadioGroup data={[{label: 'Male', value: 'male'}, {label: 'Female', value: 'female'}]} />
        </FormItem>
        <FormItem label="Hobby" name="interest">
            <CheckboxGroup data={[
                {label: 'Eat', value: 'Eat'},
                {label: 'Sleep', value: 'Sleep'},
                {label: 'Run', value: 'Run'},
                {label: 'Movie', value: 'Movie'},
            ]} />
        </FormItem>
        <FormItem label="Desc" name="desc">
            <Input type="textarea" autoHeight rows={2} maxLength={100} wordCount placeholder="Enter something..." />
        </FormItem>
        <FormItem name="btns">
            <Button type="primary" onClick={async () => {
                const valid = await form.validate();
                if (valid) {
                    message.success('Success!');
                } else {
                    message.error('Fail!');
                }
            }}>Submit</Button>
            <Button onClick={() => {
                form.setFormData({
                    name: '',
                    mail: '',
                    city: '',
                    gender: '',
                    interest: [],
                    desc: ''
                });
                form.resetFieldsValidate();
            }} style={{"margin-left": "8px"}}>Reset</Button>
        </FormItem>
    </Form>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"Form"})," 组件支持  ",l(e.a,{href:"https://github.com/yiminghe/async-validator",children:[t(c,{name:"github"})," async-validator"]})," 方式实现的数据验证，给在 ",t(e.code,{className:"sp-inline-code",children:"useForm"})," 中设置的 ",t(e.code,{className:"sp-inline-code",children:"validation"})," 各属性校验规则为数组格式。"]})}),t(i,{id:"fields",title:"支持的表单项",src:"5fields.demo.tsx",code:`import { Button, Checkbox, Col, Form, FormItem, Input, Option, Row, Space, useForm } from "cui-solid"
import dayjs from 'dayjs';

export default () => {
    interface FormModel {
        count: number,
        check: boolean,
        fruit: string[],
        sex: number,
        switch: boolean,
        age: number,
        city: string,
        cascader: string[],
        time: string,
        timeRange: string | string[],
        date: string,
        dateRange: string | string[],
        month: string,
        monthRange: string | Date[],
        dateTime: string | Date,
        dateTimeRange: string | string[] | Date[],
        slider: number,
        tree: string[],
        color: string
    }

    const form = useForm<FormModel>({
        data: {
            count: 10,
            check: true,
            fruit: [],
            sex: 1,
            switch: true,
            age: 20,
            city: '1',
            cascader: [],
            time: '',
            timeRange: '',
            date: '',
            dateRange: '',
            month: '',
            monthRange: '',
            dateTime: '',
            dateTimeRange: '',
            slider: 0,
            tree: [],
            color: ''
        },
        validation: {
            count: {
                min: 5,
                max: 15,
                required: true,
            },
            city: {
                required: true
            }
        },
        message: {
            count: {
                max: '最大值不能超过15',
                required: '请输入值'
            },
            city: {
                required: '请选择地市'
            }
        }
    });


    const cascaderData = [
        {
            value: 'beijing', title: '北京',
            children: [
                {value: 'gugong', title: '故宫'},
                {value: 'tiantan', title: '天坛'},
                {value: 'wangfujing', title: '王府井'},
            ]
        },
        {
            value: 'jiangsu',
            title: '江苏',
            children: [
                {
                    value: 'nanjing',
                    title: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            title: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    title: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            title: '拙政园',
                            disabled: true
                        },
                        {
                            value: 'shizilin',
                            title: '狮子林',
                        }
                    ]
                }
            ],
        }];

    const treeData = [];
    for (let i = 0; i < 3; i++) {
        const c = [];
        for (let j = 0; j < 3; j++) {
            c.push({id: \`\${i + 1}_\${j + 1}\`, title: \`node_\${i + 1}_\${j + 1}\`});
        }
        treeData.push({id: \`\${i + 1}\`, title: \`node_\${i + 1}\`, children: c});
    }

    return <Form form={form} labelWidth={100} onChange={(name: string, v: any) => {
        console.log(name, v);
        console.log(form.getFormData());
    }}>
        <Row>
            <Col grid={0.33}>
                <FormItem label="是否选择:" name="check">
                    <Space dir="h" align="baseline">
                        <Checkbox label="是否选择"/>
                        <Button onClick={() => {
                            form.check = !form.check;
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
            <Col grid={0.33}>
                <FormItem label="水果:" name="fruit">
                    <Space dir="h" align="baseline">
                        <Input type="checkbox" data={[{label: '苹果', value: '1'}, {label: '桃子', value: '2'}]}/>
                        <Button onClick={() => {
                            form.fruit = ['2'];
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
            <Col grid={0.33}>
                <FormItem label="性别:" name="sex">
                    <Space dir="h" align="baseline">
                        <Input type="radio" data={[{label: '男', value: 1}, {label: '女', value: 2}]}/>
                        <Button onClick={() => {
                            form.sex = 2;
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
        </Row>

        <Row>
            <Col grid={0.33}>
                <FormItem label="开关：" name="switch">
                    <Space dir="h" align="center">
                        <Input type="switch" />
                        <Button onClick={() => {
                            form.switch = !form.switch;
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
            <Col grid={0.33}>
                <FormItem label="阿萨德：" name="count">
                    <Space dir="h">
                        <Input prefix="￥" suffix="元" />
                        <Button onClick={() => {
                            form.count = form.count + 1;
                            console.log(form.getFormData());
                        }}>Add</Button>
                    </Space>
                </FormItem>
            </Col>
            <Col grid={0.33}>
                <FormItem label="年龄：" name="age">
                    <Space dir="h" align="center">
                        <Input type="spinner" />
                        <Button onClick={() => {
                            form.age = form.age + 1;
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
        </Row>

        <Row>
            <Col grid={0.33}>
                <FormItem label="地市：" name="city">
                    <Space dir="h" align="center">
                        <Input type="select" clearable>
                            <Option label="北京" value="1" />
                            <Option label="上海" value="2" />
                            <Option label="深圳" value="3" />
                        </Input>
                        <Button onClick={() => {
                            form.city = '2';
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
            <Col grid={0.33}>
                <FormItem label="景点：" name="cascader">
                    <Space dir="h" align="center">
                        <Input type="cascader" data={cascaderData} />
                        <Button onClick={() => {
                            form.cascader = ['beijing','gugong'];
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
            <Col grid={0.33}>
                <FormItem label="时间：" name="time">
                    <Space dir="h" align="center">
                        <Input type="time" />
                        <Button onClick={() => {
                            form.time = '10:10:10';
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col grid={0.33}>
                <FormItem label="时间区间：" name="timeRange">
                    <Space dir="h" align="center">
                        <Input type="timeRange" />
                        <Button onClick={() => {
                            form.timeRange = ['10:10:10', '12:12:00'];
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
            <Col grid={0.33}>
                <FormItem label="日期：" name="date">
                    <Space dir="h" align="center">
                        <Input type="date" />
                        <Button onClick={() => {
                            form.date = '2023-04-05';
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
            <Col grid={0.33}>
                <FormItem label="日期范围：" name="dateRange">
                    <Space dir="h" align="center">
                        <Input type="dateRange" />
                        <Button onClick={() => {
                            form.dateRange = ['2023-04-05', '2023-04-08'];
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
        </Row>

        <Row>
            <Col grid={0.33}>
                <FormItem label="月份：" name="month">
                    <Space dir="h" align="center">
                        <Input type="month" />
                        <Button onClick={() => {
                            form.month = '2023-04';
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
            <Col grid={0.33}>
                <FormItem label="月份范围：" name="monthRange">
                    <Space dir="h" align="center">
                        <Input type="monthRange" />
                        <Button onClick={() => {
                            form.monthRange = [dayjs('2023-04').toDate(), dayjs('2023-08').toDate()];
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
            <Col grid={0.33}>
                <FormItem label="日期时间：" name="dateTime">
                    <Space dir="h" align="center">
                        <Input type="dateTime" />
                        <Button onClick={() => {
                            form.dateTime = dayjs('2023-04-05 10:10:10').toDate();
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
        </Row>

        <Row>
            <Col grid={0.33}>
                <FormItem label="日期时间范围：" name="dateTimeRange">
                    <Space dir="h" align="center">
                        <Input type="dateTimeRange" />
                        <Button onClick={() => {
                            form.dateTimeRange = [dayjs('2023-04-05 10:10:10').toDate(), dayjs('2023-04-08 12:10:10').toDate()];
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
            <Col grid={0.33}>
                <FormItem label="进度：" name="slider">
                    <Space dir="h" align="center">
                        <Input type="slider" />
                        <Button onClick={() => {
                            form.slider = 30;
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
            <Col grid={0.33}>
                <FormItem label="地点：" name="tree">
                    <Space dir="h" align="center">
                        <Input type="treeSelect" data={treeData} multi/>
                        <Button onClick={() => {
                            form.tree = ['2_1'];
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col grid={0.33}>
                <FormItem label="颜色：" name="color">
                    <Space dir="h" align="center">
                        <Input type="color" />
                        <Button onClick={() => {
                            form.color = '';
                            console.log(form.getFormData());
                        }}>改变</Button>
                    </Space>
                </FormItem>
            </Col>
        </Row>
        <Space dir="h">
            <Button onClick={() => {
                form.resetFields();
            }}>重置</Button>

            <Button onClick={() => {
                form.isValid();
            }}>校验</Button>
        </Space>
    </Form>
}`,scopes:{dayjs:s},children:l(e.p,{children:["form 支持 ",t(e.code,{className:"sp-inline-code",children:"Input"})," ",t(e.code,{className:"sp-inline-code",children:"Checkbox"})," ",t(e.code,{className:"sp-inline-code",children:"Radio"})," ",t(e.code,{className:"sp-inline-code",children:"Select"}),`\r
`,t(e.code,{className:"sp-inline-code",children:"Search"})," ",t(e.code,{className:"sp-inline-code",children:"Textarea"})," ",t(e.code,{className:"sp-inline-code",children:"AutoComplete"})," ",t(e.code,{className:"sp-inline-code",children:"Cascader"}),`\r
`,t(e.code,{className:"sp-inline-code",children:"Datepicker"})," ",t(e.code,{className:"sp-inline-code",children:"Timepicker"})," ",t(e.code,{className:"sp-inline-code",children:"Progress"})," ",t(e.code,{className:"sp-inline-code",children:"Rate"}),`\r
`,t(e.code,{className:"sp-inline-code",children:"Slider"})," ",t(e.code,{className:"sp-inline-code",children:"Spinner"})," ",t(e.code,{className:"sp-inline-code",children:"Switch"})," ",t(e.code,{className:"sp-inline-code",children:"Transfer"})," ",t(e.code,{className:"sp-inline-code",children:"TreeSelect"}),`\r
`,t(e.code,{className:"sp-inline-code",children:"Upload"}),t(e.br,{}),`
`,"form绑定数据使用useForm创建对象并传递给From， useForm 包含 ",t(e.code,{className:"sp-inline-code",children:"data"})," ",t(e.code,{className:"sp-inline-code",children:"validation"})," 和 ",t(e.code,{className:"sp-inline-code",children:"messages"})," 参数，data 中的数据字段和FormItem的name对应"]})}),l(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"labelWidth"}),t(e.td,{style:{textAlign:"left"},children:"label宽度"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"form"}),t(e.td,{style:{textAlign:"left"},children:"表单绑定"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"inline"}),t(e.td,{style:{textAlign:"left"},children:"内联模式"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"autocomplete"}),t(e.td,{style:{textAlign:"left"},children:"自动填充选项"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"errorTransfer"}),t(e.td,{style:{textAlign:"left"},children:"使用popover显示错误提示"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"},children:"false"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"errorAlign"}),t(e.td,{style:{textAlign:"left"},children:"设置popover的显示位置"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"right"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onChange"}),t(e.td,{style:{textAlign:"left"},children:"表单项改变事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"events",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#events",children:t(e.span,{className:"icon icon-link"})}),"Form 事件 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"事件名称"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"返回值"})]})}),t(e.tbody,{children:l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onChange"})}),t(e.td,{style:{textAlign:"left"},children:"值改变事件"}),t(e.td,{style:{textAlign:"left"},children:"name, value"})]})})]}),l(e.h2,{id:"item_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#item_props",children:t(e.span,{className:"icon icon-link"})}),"FormItem属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"inline"}),t(e.td,{style:{textAlign:"left"},children:"内联模式"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"labelWidth"}),t(e.td,{style:{textAlign:"left"},children:"label宽度"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"labelStyle"}),t(e.td,{style:{textAlign:"left"},children:"label样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"label"}),t(e.td,{style:{textAlign:"left"},children:"表单项文本"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"name"}),t(e.td,{style:{textAlign:"left"},children:"表单项名称"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"errorTransfer"}),t(e.td,{style:{textAlign:"left"},children:"使用popover显示错误提示"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"},children:"false"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"errorAlign"}),t(e.td,{style:{textAlign:"left"},children:"设置popover的显示位置"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"right"})]})]})]}),l(e.h2,{id:"useForm_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#useForm_props",children:t(e.span,{className:"icon icon-link"})}),"useForm属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"data"}),t(e.td,{style:{textAlign:"left"},children:"表单数据， key对应FormItem的name字段"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"validation"}),t(e.td,{style:{textAlign:"left"},children:"字段校验配置 key 与 data中的key对应， 如果使用async-validator验证方式，则value为数组形式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"messages"}),t(e.td,{style:{textAlign:"left"},children:"校验失败的提示信息 key 与 data中的key对应，如果使用async-validator验证方式，则可以为空"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"use_form_methods",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#use_form_methods",children:t(e.span,{className:"icon icon-link"})}),"useForm方法 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"事件名称"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"参数"}),t(e.th,{style:{textAlign:"left"},children:"返回值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"resetFields"})}),t(e.td,{style:{textAlign:"left"},children:"重置表单以及校验"}),t(e.td,{style:{textAlign:"left"},children:"-"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"validate"})}),t(e.td,{style:{textAlign:"left"},children:"是否验证通过"}),t(e.td,{style:{textAlign:"left"},children:"-"}),t(e.td,{style:{textAlign:"left"},children:"true: 通过, false: 不通过"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"isValid"})}),t(e.td,{style:{textAlign:"left"},children:"同validate"}),t(e.td,{style:{textAlign:"left"},children:"-"}),t(e.td,{style:{textAlign:"left"},children:"true: 通过, false: 不通过"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"getFormData"})}),t(e.td,{style:{textAlign:"left"},children:"获取当前表单数据"}),t(e.td,{style:{textAlign:"left"},children:"-"}),t(e.td,{style:{textAlign:"left"},children:"Object"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"setFormData"})}),t(e.td,{style:{textAlign:"left"},children:"设置表单项数据，多个较为方便"}),t(e.td,{style:{textAlign:"left"},children:"mData: any表单数据，check：是否立即验证"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"setCheckValid"})}),t(e.td,{style:{textAlign:"left"},children:"设置表单项的验证方法， 逻辑较为复杂不建议自定义"}),t(e.td,{style:{textAlign:"left"},children:"name: 表单项名称， checkFn： 验证方法"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"clearValidates"})}),t(e.td,{style:{textAlign:"left"},children:"清空校验"}),t(e.td,{style:{textAlign:"left"},children:"name?: 需要清空校验的表单项名称，不传则清空整个表单"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"resetFieldsValidate"})}),t(e.td,{style:{textAlign:"left"},children:"同clearValidates"}),t(e.td,{style:{textAlign:"left"},children:"name?: 需要清空校验的表单项名称，不传则清空整个表单"}),t(e.td,{style:{textAlign:"left"},children:"-"})]})]})]})]}),`
`,`
`,`
`,t(a,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"dynamic_rule",title:"动态校验",src:"2dynamic_rule.demo.tsx"},{id:"error_transfer",title:"错误提示位置",src:"3error_transfer.demo.tsx"},{id:"async_validate",title:"async-validator",src:"4async_validate.demo.tsx"},{id:"fields",title:"支持的表单项",src:"5fields.demo.tsx"},{id:"props",depth:2,title:"属性"},{id:"events",depth:2,title:"Form 事件"},{id:"item_props",depth:2,title:"FormItem属性"},{id:"useForm_props",depth:2,title:"useForm属性"},{id:"use_form_methods",depth:2,title:"useForm方法"}]})]})}function p(n={}){const{wrapper:e}=n.components||{};return e?t(e,{...n,children:t(r,{...n})}):r(n)}export{p as default,m as frontmatter};
